<template>
	<view class="">
		<u-navbar title="投诉" :autoBack="true" :fixed="false"></u-navbar>
		<view class="p-30">
			<u-form labelPosition="left" :model="form" :rules="rules" ref="form" labelWidth="0" errorType="toast">
				<view class="card" style="padding: 0 30rpx;">
					<u-form-item label=" " prop="package_id">
						<view class="flex-row justify-between align-center w-full">
							<view class="label">
								套餐名称
							</view>
							<view class="">
								<u-input v-model="package_name" border="none" placeholder="请输入"></u-input>
							</view>
						</view>
					</u-form-item>
				</view>
				<view class="card mt-30" style="padding: 0 30rpx;">
					<u-form-item label=" " prop="username">
						<view class="flex-row justify-between align-center w-full">
							<view class="label">
								发帖人
							</view>
							<view class="">
								<u-input v-model="form.username" border="none" placeholder="请输入"></u-input>
							</view>
						</view>
					</u-form-item>
				</view>
				<view class="card mt-30" style="padding: 0 30rpx;">
					<u-form-item label=" " prop="description">
						<view class=" justify-between align-center w-full">
							<view class="label">
								投诉原因
							</view>
							<view class="mt-10">
								<u-textarea v-model="form.description" placeholder="请输入您的意见或建议"></u-textarea>
							</view>
						</view>
					</u-form-item>
				</view>
			</u-form>
			<view class="submit mt-30" @click="submit">
				<u-button :loading="loading" :color="$u.color.color" shape="circle">立即提交</u-button>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		complaint
	} from '@/common/api.js'
	import {
		mapState
	} from "vuex";
	import commonMixin from '@/mixins/common.js';
	export default {
		mixins: [commonMixin],
		data() {
			return {
				loading: false,
				form: {
					description: '',
					staff_id: "",
					package_id:'',
					username: "",
				},
				package_name: '',
				rules: {
					package_id: {
						type: 'string',
						required: true,
						message: '请输入套餐名称',
						trigger: ['blur', 'change']
					},
					username: {
						type: 'string',
						required: true,
						message: '请输入发帖人',
						trigger: ['blur', 'change']
					},
					description: {
						type: 'string',
						required: true,
						message: '请输入描述',
						trigger: ['blur', 'change']
					},
				}
			}
		},
		onLoad(e) {
			if(e.package_id) {
				this.form.package_id = e.package_id
				this.package_name = e.package_name
			}
		},
		methods: {
			submit() {
				let vm = this;
				this.$refs.form.validate().then(res => {
					complaint(this.form).then(res => {
						console.log('res', res);
						vm.$refs.uToast.show({
							type: 'success',
							message: '投诉成功，请等待管理员审核...',
							complete() {
								vm.loading = false;
								uni.redirectTo({
									url: '/pages/mine/index'
								})
							}
						})
					})
				}).catch(errors => {
					// uni.$u.toast('校验失败')
					vm.loading = false;
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
</style>